<template>
  <view class="order-status">
    <scroll-view scroll-x scroll-width-animation class="content" :scroll-left="scrollLeft" >
      <view class="items">
        <block v-for="(status, index) in statuses" :key="index" >
          <view :id="'_s_' + index" class="item" :class="{'item-active': activeIndex === index}"
              :style="{color: activeIndex === index ? defaultConfig.activeColor : defaultConfig.textColor}"
              @click="onClick(index)">
							{{ status.title }}
          </view>
        </block>
      </view>
      <view class="underline" :style="{ transform: 'translateX('+underline.left+'px)',width: defaultConfig.underlineWidth,backgroundColor: defaultConfig.underlineColor}"></view>
    </scroll-view>
  </view>
</template>

<script>
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "OrderStatusCom",
	store,
  props: {
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
	computed: {
		...mapGetters([
			'isLogin'
		])
	},
  data() {
    return {
      statuses: [
        {
          status: 'all',
          title: '全部'
        },
        {
          status: 'unpaid',
          title: '待付款'
        },
        {
          status: 'undelivered',
          title: '待发货'
        },
        {
          status: 'delivered',
          title: '已发货'
        },
        {
          status: 'uncommented',
          title: '待评价'
        },
        {
          status: 'aftersales',
          title: '退换货'
        }
      ],
      activeIndex: 0,
      scrollLeft: 0,
      defaultConfig: {
        textColor: '#999',
        activeColor: '#333',
        underlineWidth: 0,
        underlineColor: '#fff'
      },
      underline: {
        left: 0
      }
    }
  },
  watch: {
    defaultIndex: {
      handler(val) {
        this.activeIndex = val
      },
      immediate: true
    }
  },
  methods: {
    updateUnderline() {
      let list = this.statuses
      if (list.length === 0) return;
      const query = uni.createSelectorQuery().in(this)
      list.forEach((item, index) => {
        query.select('#_s_' + index).boundingClientRect((res) => {
					if (res) {
						item._underline = {
							left: res.left + (res.width - this.defaultConfig.underlineWidth) / 2
						}
						if (list.length - 1 === index) {
							this.slideToIndex()
						}
					}
        }).exec()
      })
    },
    slideToIndex() {
      const index = this.activeIndex
      this.underline = {
        left: this.statuses[index]._underline.left
      }
      this.scrollLeft = this.activeIndex * this.defaultConfig.underlineWidth
    },
    async onClick(index) {
			if(await this.isLogin){
				this.activeIndex = index
				this.slideToIndex()
				this.$emit('statusClicked', {index: index, status: this.statuses[index].status})
			}
      
    }
  },
	mounted(){
		this.updateUnderline()
	}
}
</script>

<style lang="scss" scoped>
.order-status {
  font-size: 16px; height: 45px; line-height: 45px; background-color: white;
  .content {
    white-space: nowrap;
    width: 100%; height: 45px; box-sizing: border-box; position: relative;
    .items {
      height: 48px;
      .item {
        display: inline-block; position: relative;
        padding: 0 15px; height: 100%; text-align: center;
        &-active {
          color: red;
        }
      }
    }
    .underline {
      position: absolute; bottom: -1;
      width: 24px; height: 2px; display: block; transition: .5s;
    }
  }
}
/* #ifdef H5 */
/deep/.uni-scroll-view::-webkit-scrollbar {
  display: none;
}
/deep/.uni-scroll-view {
  scrollbar-width: none;
}
/* #endif */
</style>
